<div style="padding: 5px; background-color: #1e213d;margin-top: -20px; border: 1px solid #1e213d;" class="history-alert">
	<div>
		<div class="toolSet">
			<div class="toolSetLeft">
				<div class="buttonSet">
					<div class="table-buttons-left">
						<!-- <div class="operate" (click)="refresh()"><i
                                class="iconfont icon-refresh1"></i>{{'TrafficManagement.TrafficAlert.Refresh' | translate}}
                        </div>

                        <div class="operate" (click)="CreateIR()"><i
                                class="iconfont icon-add"></i>{{'TrafficManagement.TrafficAlert.CreateIR' | translate}}
                        </div> -->
						<button class="op-btn" nz-button nzType="primary" (click)="refresh()">
							<i nz-icon nzType="reload" nzTheme="outline"></i>{{'TrafficManagement.TrafficAlert.Refresh' | translate}}
						</button>
						<button nz-button nzType="primary" (click)="CreateIR()">
							<!-- <i nz-icon nzType="plus" nzTheme="outline"></i> -->
							<svg t="1649734574121" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="4498" width="20" height="20">
								<path
									d="M512 958.016611c-119.648434 0-232.1288-46.367961-316.736783-130.559656-84.640667-84.255342-131.263217-196.255772-131.263217-315.455235 0-119.168499 46.624271-231.199892 131.232254-315.424271 84.607983-84.191695 197.088348-130.559656 316.736783-130.559656s232.1288 46.367961 316.704099 130.559656c84.67163 84.224378 131.263217 196.255772 131.263217 315.391587 0.032684 119.199462-46.591587 231.232576-131.263217 315.455235C744.1288 911.615966 631.648434 958.016611 512 958.016611zM512 129.983389c-102.623626 0-199.071738 39.743475-271.583282 111.936783-72.480581 72.12794-112.416718 168.063432-112.416718 270.079828s39.903454 197.951888 112.384034 270.047144c72.511544 72.191587 168.959656 111.936783 271.583282 111.936783 102.592662 0 199.071738-39.743475 271.583282-111.936783 72.480581-72.160624 112.416718-168.063432 112.384034-270.079828 0-102.016396-39.903454-197.919204-112.384034-270.016181C711.071738 169.759548 614.592662 129.983389 512 129.983389z"
									p-id="4499" fill="#ffffff"></path>
								<path
									d="M736.00086 480.00086 544.00086 480.00086 544.00086 288.00086c0-17.664722-14.336138-32.00086-32.00086-32.00086s-32.00086 14.336138-32.00086 32.00086l0 192L288.00086 480.00086c-17.664722 0-32.00086 14.336138-32.00086 32.00086s14.336138 32.00086 32.00086 32.00086l192 0 0 192c0 17.695686 14.336138 32.00086 32.00086 32.00086s32.00086-14.303454 32.00086-32.00086L544.00258 544.00086l192 0c17.695686 0 32.00086-14.336138 32.00086-32.00086S753.696546 480.00086 736.00086 480.00086z"
									p-id="4500" fill="#ffffff"></path>
							</svg>

							{{'TrafficManagement.TrafficAlert.CreateIR' | translate}}
						</button>
					</div>
				</div>
				<!-- <p>Period:<nz-range-picker nzSize="default" [(ngModel)]="dateRange" (ngModelChange)="onChange($event)" style="margin-left: 0.1rem"></nz-range-picker></p> -->
			</div>
			<div class="toolSetRight">
				<itmp-toolbar [toolbarList]="toolbarList" [eventType]="'alert-position'" [selectData]="selectItem"
					exportName="trafficHistoricalAlert" [searchData]="queryData.condition"></itmp-toolbar>
			</div>
		</div>
	</div>
	<nz-table id="nzTable" #basicTable [nzShowPagination]="false" [nzFrontPagination]="false" [nzData]="listOfData">
		<thead>
			<tr>
				<ng-container *ngFor="let item of renderHeader;">
					<th
						*ngIf="item.name != 'Alert Source' && item.name !== 'Description' && item.name != 'Detection Date' && item.name != 'Ack Date'"
						class="listTitle">
						<div style="height: 35px;">{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
						<div style="padding-top: 0.1rem"><input nz-input placeholder="" [(ngModel)]="item.key"
								(ngModelChange)="filterSearch()" /></div>
					</th>
					<th *ngIf="item.name === 'Alert Source'" class="listTitle">
						<div style="height: 35px;">{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
						<div style="padding-top: 0.1rem">
							<nz-select style="width: 1rem" [(ngModel)]="item.key" (ngModelChange)='filterSearch()'>
								<nz-option *ngFor="let option of alertSourceList" [nzLabel]="option.label" [nzValue]="option.value">
								</nz-option>
							</nz-select>
						</div>
					</th>
					<th *ngIf="item.name === 'Description'" class="listTitle">
						<div style="height: 35px;">{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
						<div class="no-print" style="padding-top: 0.1rem">
							<nz-select style="width: 1rem" [(ngModel)]="item.key" (ngModelChange)='filterSearch()'
								[nzPlaceHolder]="'Share.All' | translate" nzShowSearch nzAllowClear
								[nzDropdownMatchSelectWidth]="false">
								<nz-option *ngFor="let option of description" [nzLabel]="'Share.'+option.name | translate"
									[nzValue]="option.name"></nz-option>
							</nz-select>
						</div>
					</th>
					<th *ngIf="item.name === 'Detection Date'" class="listTitle">
						<div style="height: 35px;">{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
						<div style="padding-top: 0.1rem">
							<nz-range-picker nzSize="default" [(ngModel)]="dateRange" [nzDisabledDate]="disabledDate"
								[nzStyle]="{width:'260px'}" (ngModelChange)="onChange($event)"></nz-range-picker>
						</div>
					</th>
					<th *ngIf="item.name === 'Ack Date'" class="listTitle">
						<div style="height: 35px;">{{'TrafficManagement.TrafficAlert.'+item.value | translate}}</div>
						<div style="padding-top: 0.1rem">
							<nz-range-picker nzSize="default" [nzDisabledDate]="disabledDate" [(ngModel)]="dateRangeAck"
								[nzStyle]="{width:'260px'}" (ngModelChange)="onAckChange($event)"></nz-range-picker>
						</div>
					</th>
				</ng-container>
			</tr>
		</thead>
		<tbody>
			<tr *ngFor="let data of basicTable.data;let idx = index" (click)="showDetail(data)"
				[ngClass]="{'active':data.alertID == editingItem}">
				<td>{{ data.detectionTime | date:'yyyy/MM/dd HH:mm' }}</td>
				<td [title]="data.alertID">
					<div style="word-break: break-word;max-width: 460px" class="text-ellipsis">{{ data.alertID }}</div>
				</td>
				<td>{{ data.zoneID }}</td>
				<td>{{ data.roadName }}</td>
				<td>{{ !isShowVietName?data.alertDescription:data.vietAlertDescription }}</td>
				<td>{{ data.alertSource }}</td>
				<td>{{ data.ackBy }}</td>
				<td style="min-width: 220px">{{ data.ackTime | date:'yyyy/MM/dd HH:mm' }}</td>
				<td>{{ !isShowVietName?data.ackValue:data.vietAckValue }}</td>
			</tr>
		</tbody>
		<tfoot class="history-alert">
			<tr>
				<td [attr.colspan]="renderHeader.length+1" style="padding: 10px;">
					<itmp-pagination [totalEle]="pagination.totalEle" [pageSize]="pagination.pageSize"
						[pageNum]="pagination.currentPage" showCountInfo=true [count]="pagination.currentSize"
						(pageNumChange)="onPageChange($event)" (pageSizeChange)="onSizeChange($event)">
					</itmp-pagination>
				</td>
			</tr>
		</tfoot>
	</nz-table>

	<nz-modal [(nzVisible)]="isCreateTr"
		nzTitle="{{'TrafficManagement.TrafficAlert.confirmToCreateIncident' | translate}}" (nzOnCancel)="createIrCancel()"
		(nzOnOk)="createIrOk()" class="create-it">
		<div>
			{{'TrafficManagement.TrafficAlert.Whether to confirm creation incident' | translate}}
		</div>
	</nz-modal>
	<nz-modal [(nzVisible)]="isCrossRegion"
		nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}" (nzOnCancel)="createIrCancel()"
		(nzOnOk)="createIrOkForce()">
		<div>
			{{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
		</div>
	</nz-modal>
</div>